<template>
	<div class="addressset-box">
		<van-address-edit
			:area-list="areaList"
			:show-delete="$store.state.isEditAddress"
			:address-info="addressInfo"
			show-postal
			show-set-default
			save-button-text="确认"
			delete-button-text="删除收货地址"
			@save="save"
			@delete="removeAddress"
		/>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	import areaList from './Area.js'
	import { 
		address,
		getAddressByAid,
		removeAddress
	} from '@/api/order.js'
	export default {
		data () {
			return {
				// 级联选择器选项
				areaList,
				// 编辑状态下的用户地址信息对象
				addressInfo: {},
				aid: '' //当前路由的地址aid
			}
		},
		created() {
			// 初始化数据
			this.addressInfo = {}
			this.aid = this.$route.query.aid
			if (this.aid) {
				this._getAddressByAid()
			}
		},
		// 路由缓存触发
		activated() {
			if (this.keepAlive) {
				// 初始化数据
				this.addressInfo = {}
				this.aid = this.$route.query.aid
				if (this.aid) {
					this._getAddressByAid()
				}
			}
		},
		methods: {
			// 根据aid获取地址信息请求
			_getAddressByAid() {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 获取aid
				const aid = this.$route.query.aid
				// 发起请求
				getAddressByAid({
					tokenString,
					aid
				})
				.then(({data: res}) => {
					console.log('根据aid查询地址信息',res)
					if (res.code !== 40000) return this.$toast.fail('请求异常,请重新尝试!')
					let data = res.result[0]
					data.isDefault = Boolean(data.isDefault)
					this.addressInfo = data
					this.keepAlive = true
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 编辑 / 新建地址 请求
			_address(url,data) {
				// 加载中
				this.$toast.loading({
					message: '加载中...',
					forbidClick: true
				})
				// 发起请求
				address(url,data)
				.then(({data: res}) => {
					console.log('新建/编辑地址',res)
					if (res.code !== 30000 && res.code !== 9000) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast(res.msg)
					bus.$emit('refresh-address')
					setTimeout(() => {
						this.$router.back(-1)
					},500)
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 保存地址
			save(content) {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 添加到请求数据中
				let addressInfo = Object.assign({}, content)
				// 添加键值
				addressInfo.tokenString = tokenString
				// 布尔类型转换为数字类型
				addressInfo.isDefault = Number(addressInfo.isDefault)
				// 判断是编辑模式还是新建模式
				// 调用新建请求
				if (!this.$store.state.isEditAddress) return this._address('/addAddress', addressInfo)
				
				// 编辑模式
				let flag = false
				// 遍历原数据和新数据比较,判断是否编辑过内容
				for (let key in this.addressInfo) {
					if (content[key] !== this.addressInfo[key]) {
						flag = true
						break
					}
				}
				// flag
				if (!flag) return this.$toast('未修改内容')
				// 调用编辑请求
				this._address('/editAddress', addressInfo)
			},
			// 移除地址
			removeAddress() {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 发起请求
				removeAddress({
					tokenString,
					aid: this.aid
				})
				.then(({data:res}) => {
					console.log('删除地址',res)
					if (res.code !== 10000) return this.$toast.fail('请求异常,请重新尝试!')
					bus.$emit('refresh-address')
					setTimeout(() => {
					  this.$router.push({ name: "Address" })
					}, 500)
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressset-box{
		/deep/ .van-address-edit__buttons{
			.van-button--danger{
				background-color: #3498db;
				border-color: #3498db;
			}
			.van-button--default{
				color: #fff;
				background-color: #ee0a24;
				border-color: #ee0a24;
			}
		}
	}
</style>